<template>
  <div class="box">
    <div class="leftBox">
      <!-- 树组件 -->
      <useTreeComponents />
    </div>
    <div class="rightBox">
      <!-- 头 -->
      <div class="title">
        <p>作业范围</p>
        <el-button
          v-if="flge"
          type="danger"
          @click="flge = !flge"
          style="width: 90px; height: 36px"
          >编辑</el-button
        >
        <div v-else>
          <el-button type="danger" style="width: 90px; height: 36px"
            >提交</el-button
          >
          <el-button @click="flge = !flge" style="width: 90px; height: 36px"
            >取消</el-button
          >
        </div>
      </div>
      <!-- map部分 -->
      <div class="mapBox">
        <div class="searchBox">
          <p>地区关键词:</p>
          <el-input
            placeholder="请输入地区关键词"
            style="width: 230px; height: 40px"
          />
        </div>
        <div class="map">
          <!-- 编辑 -->
          <div class="mapAdd" v-if="!flge">
            <el-button class="bj">开始绘制</el-button>
            <el-alert
              show-icon
              style="margin: 12px 0; padding: 0"
              title="点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围"
              type="warning"
            />
          </div>
          <!-- 地图显示部分 -->
          <useMapComponents />
        </div>
      </div>
    </div>
  </div>
  <div class="buttonBox">
    <p>
      江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2022 All Rights
      Reserved 苏ICP备16007882号-11
    </p>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import useMapComponents from './components/useMapComponents.vue';
import useTreeComponents from './components/useTreeComponents.vue';

const flge = ref<Boolean>(true);
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #f3f4f7;
  .leftBox {
    width: 219px;
    height: 100%;
    padding: 10px 8px 0 9px !important;
    border-radius: 8px;
    background-color: #ffffff;
  }
  .rightBox {
    flex: 1;
    margin-left: 20px;
    height: 100%;
    background-color: #ffffff;
    .title {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 25px;
      background: #f8faff;
    }
    .mapBox {
      // width: 100%;
      height: 300px;
      padding: 25px;
      .searchBox {
        height: 50px;
        display: flex;
        align-items: center;
        p {
          margin-right: 15px;
          color: #20232a;
          font-weight: 400;
          font-size: 14px;
        }
      }
      // background-color: #000;
    }
    .map {
      height: 400px;
      // width: 100%;
      padding-top: 22px;
      position: relative;
      padding: 22px 0;
      // background-color: #20232a;
      .mapAdd {
        width: 100%;
        z-index: 10;
        height: 90px;
        margin-top: 20px;
        position: absolute;
        background-color: #ffffff;
        top: 0;
        left: 0;
        .bj {
          background: #ffeeeb;
          padding: 10px 20px;
          border: 1px solid #f3917c;
          color: #e15536;
          font-family: PingFangSC, PingFangSC-Regular;
        }
        .bj:hover {
          color: #fff;
          background-color: #ed7455;
        }
      }
    }
  }
}
.buttonBox {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  p {
    font-size: 15px;
    color: #ccc;
  }
}
</style>
